<template>
	<view class="reservation-container">
		<!-- 产品信息区域 -->
<!-- 		<view class="product-info">
			<image class="product-image" :src="userInfo.image"></image>
			<view class="product-details">
				<view class="product-name">{{userInfo.title}}</view>
				<view class="product-desc">支持指纹 | 密码 | 刷卡 | 微信小程序 | 钥匙开门</view>
				<view class="service-item">服务项目: 安装</view>
			</view>
			<view class="close-btn" @click="closePage">×1</view>
		</view> -->

					<view class="lock-image">
					
						<swiper class="swiper" @change='spchange' circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="swIndex == 0 ? bfsz : interval"
									:duration="duration"
									
									>
									<swiper-item v-if="userInfo.video">
										 <video :muted='show' @click="clickSp({images: userInfo.video, type: 'video'})" ref='videoSw' @ended='endeds' autoplay show-fullscreen-btn direction style="width: 750rpx;height: 434rpx;" id="myVideo" :src="userInfo.video"  controls></video>
									
									</swiper-item>
									<swiper-item v-for="(item,i) in userInfo.images" :key="i">
									<image  class="lock-images" :src="item"></image>
									</swiper-item>

								</swiper>
					</view>

		<!-- 表单区域 -->
		<view class="form-container">
			<view class="container-item">
			<view class="form-item" v-for="(item, index) in formItems" :key="index">
				<view class="form-label">{{item.label}}<text v-if="item.required" class="required">*</text></view>
				<view v-if="item.type === 'input'" class="form-input-container">
					<input class="form-input" :type="item.inputType || 'text'" :placeholder="item.placeholder" v-model="formData[item.field]">
				</view>
			<!-- 	<view v-else-if="item.type === 'select'" class="form-select-container" @click="openRegion">
					<text class="form-select-text">{{formData[item.field] || item.placeholder}}</text>
					 <regionWindow ref="region"></regionWindow>
					<image class="arrow-icon" src="/static/img/arrow.png"></image>
				</view> -->
			</view>
            </view>
			<!-- 支付方式区域 -->
<!-- 			<view class="payment-section">
				<view class="section-title">支付方式</view>
				<view class="payment-item" @click="selectPaymentMethod('wechat')">
					<image class="payment-icon" src="/static/img/wxwx.png"></image>
					<text class="payment-text">微信支付</text>
					<radio-group>
					  <radio value="1" class="check-icon" color="red" :checked="true"></radio>
					</radio-group>
				</view>
			</view> -->

			<!-- 费用和支付按钮区域 -->
<!-- 			<view class="payment-footer">
				<view class="fee-info">
					<text class="fee-label">安装费用</text>
					<text class="fee-amount">¥40.00 元</text>
				</view>
				<view class="pay-btn" @click="submitPayment">支付费用</view>
			</view> -->
				<view class="pay-btn" @click="submitPayment">立即预约</view>
		</view>
	</view>
	<uv-overlay :show="show" @click="show = false">
		<view style="display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;">
			<video style="width: 100%;height: 100%" v-if="activeSpData.type == 'video'" :src="activeSpData.images"></video>
			<!-- <image style="width: 100%;height: 100%" v-if="activeSpData.type == 'image'" :src="activeSpData.src"></image> -->
		</view>
		</uv-overlay>
</template>

<script>
	import { SetserviceData ,getdetailData} from '../../../api';

	export default {

		data() {
			return {
				show: false,
				activeSpData: {},
				indicatorDots: true,
				         autoplay: true,
				         interval: 2000,
				         duration: 500,
				formItems: [
					{
						label: '填写卡号',
						field: 'card_number',
						type: 'input',
						required: true,
						placeholder: '请输入卡号'
					},
					{
						label: '密钥',
						field: 'card_password',
						type: 'input',
						required: true,
						placeholder: '请输入密钥',

					},
					{
						label: '联系方式',
						field: 'mobile',
						type: 'input',
						required: true,
						placeholder: '请输入电话号码'
					},
					{
						label: '姓名',
						field: 'consignee',
						type: 'input',
						required: true,
						placeholder: '请输入姓名'
					},
					{
						label: '地址',
						field: 'address',
						type: 'input',
						required: true,
						placeholder: '请选择'
					}
				],
				formData: {
					card_number: '',//卡号
					address: '',//地址
					consignee: '',//联系人
					card_password: '',//卡密
					goods_id:'',//商品id
					size:'',//测量尺寸
					image:'',//锁体照片
					mobile:'',//手机号码
				},
				bfsz: 999999,
				touchNum : 0,
				swIndex: 0,
				selectedPaymentMethod: 'wechat',
				     userInfo: {},
					 ids:""
			};
		},
		  onLoad(options) {
			  this.videoContext = uni.createVideoContext('myVideo', this);
			  console.log('接受的参数')
		    // 2. 将JSON字符串转为对象
		    this.ids =options.userInfo;
		    this.getdetail();
		    console.log("接收的对象参数：",this.ids);
			
		  },
		methods: {
			endeds () {
				console.log(this.bfsz ,'---')
				this.bfsz = 0
			},
			spchange (item) {
								this.swIndex = item.detail.current
								if (this.swIndex == 0) {
									this.bfsz = 999999
									this.videoContext.play()
								} else {
									this.videoContext.stop()
								}
			},
			clickSp (item) {
				
					console.log(this.touchNum)
					this.touchNum ++
								setTimeout(()=>{
									if(this.touchNum == 1){
										console.log('单击')
									}
									if(this.touchNum >= 2){
										// console.log(item)
										
										this.show = true
										this.activeSpData = item
									}
									this.touchNum = 0
				},250)
			},
			    sendDanmu: function() {
			            this.videoContext.sendDanmu({
			                text: this.danmuValue,
			                color: this.getRandomColor()
			            });
			            this.danmuValue = '';
			        },
			        videoErrorCallback: function(e) {
			            uni.showModal({
			                content: e.target.errMsg,
			                showCancel: false
			            })
			        },
			        getRandomColor: function() {
			            const rgb = []
			            for (let i = 0; i < 3; ++i) {
			                let color = Math.floor(Math.random() * 256).toString(16)
			                color = color.length == 1 ? '0' + color : color
			                rgb.push(color)
			            }
			            return '#' + rgb.join('')
			        },
			async  getdetail(){
				let res=await getdetailData({ids:this.ids})
				console.log('getres',res);
				if(res.code==1){
					this.userInfo=res.data
					// console.log('res',res.data);
				}
			},

			closePage() {
				uni.navigateBack();
			},
			selectPaymentMethod(method) {
				this.selectedPaymentMethod = method;
			},
		async	submitPayment() {
			   // let su={
				   
			   // }
			  this.formData.size=this.userInfo.size;
			  this.formData.goods_id=this.userInfo.id;
			  this.formData.image=this.userInfo.image;
				let res= await SetserviceData(this.formData);
				if(res.code==1){
					console.log('res',res);
					uni.navigateTo({
					  url: '/pages/my/components/submission' // 目标页面路径，可带参数
					})
				}
				else{
					    uni.showToast({
					      title: res.msg,
					      icon: 'none'
					    });
				}
									// wx.navigateTo({
									//   url: '/pages/my/components/submission' // 目标页面路径，可带参数
									// })
			}
		}
	};
</script>

<style lang="scss">
	$primary-color: #e64340;
	$gray-bg: #f5f5f5;
	$white: #ffffff;
	$text-color: #333333;
	$text-gray: #666666;
	$border-color: #eeeeee;
	$placeholder-color: #999999;
				.lock-image {
					width: 750rpx;
					height: 434rpx;
					// background-color: red;
					.swiper{
						width: 750rpx;
						height: 434rpx;
						.lock-images{
							width: 750rpx;
							height: 434rpx;
						}
					}
				}
	.reservation-container {
		position: relative;
		// background-color: $gray-bg;
		background-color: #F7F8FA;
		min-height: 100vh;
padding-top: 20rpx;
box-sizing: border-box;
		.product-info {
			width: 710rpx;
			height: 200rpx;
			
			display: flex;
			align-items: center;
			padding: 20rpx;
		box-sizing: border-box;
			border-radius: 20rpx;
			background-color:#fff;
			margin: 0 20rpx 44rpx 20rpx;

			.product-image {
				width: 120rpx;
				height: 120rpx;
				margin-right: 24rpx;
					box-sizing: border-box;
			}

			.product-details {
				flex: 1;
	box-sizing: border-box;
				.product-name {
						margin-top: 8rpx;
					font-size: 28rpx;
					font-weight: bold;
					color:#000;
				}

				.product-desc {
						box-sizing: border-box;
					font-size: 20rpx;
					color: #7A8195;
					margin-top: 14rpx;
				}

				.service-item {
						box-sizing: border-box;
					font-size: 26rpx;
					color: #7A8195;
					margin-top: 28rpx;
				}
			}

			.close-btn {
				margin-top: -120rpx;
				font-size: 32rpx;
				color: $text-gray;
				padding: 10rpx;
			}
		}

		.form-container {
		   width: 750rpx;
			// padding: 20rpx;
             .container-item{
				 box-sizing: border-box;
				 width: 710rpx;
				 margin: 0 20rpx;
				 border-radius: 20rpx;
				 	background-color: #fff;
			 }
			 ::v-deep .form-item:last-child{
				 border: none;
			 }
			.form-item {
				
				height: 120rpx;
				border-bottom: 1rpx solid #ccc;
				padding-top: 32rpx;
				display: flex;
				margin: 0 20rpx;
		       box-sizing: border-box;
			

				.form-label {
					width: 180rpx;
					font-size: 30rpx;
					color: $text-color;
					line-height: 80rpx;

					.required {
						color: $primary-color;
						margin-left: 5rpx;
					}
				}

				.form-input-container {
					flex: 1;

					.form-input {
						width: 100%;
						height: 80rpx;
						// border: 1rpx solid $border-color;
						// border-radius: 8rpx;
						padding: 0 20rpx;
						font-size: 28rpx;
						color: $text-color;

						&::placeholder {
							color: $placeholder-color;
						}
					}
				}

				.form-select-container {
					flex: 1;
					display: flex;
					justify-content: space-between;
					align-items: center;
					height: 80rpx;
					// border: 1rpx solid $border-color;
					border-radius: 8rpx;
					padding: 0 20rpx;

					.form-select-text {
						font-size: 28rpx;
						color: $text-color;
					}

					.arrow-icon {
						width: 20rpx;
						height: 40rpx;
					}
				}
			}
              .payment-section{
				  width: 710rpx;
				  padding: 0 23rpx;
				  height: 230rpx;
				  margin: 18rpx 20rpx;
				  box-sizing: border-box;
				  background-color: #fff;
				  border-radius: 20rpx;
			  }
			.section-title {
				height: 114rpx;
				line-height: 114rpx;
				width: 100%;
				// margin-left: 20rpx;
				box-sizing: border-box;
				border-bottom: 1rpx solid #ccc;
				font-size: 28rpx;
				color: #000;

			}

			.payment-item {
				display: flex;
				box-sizing: border-box;
				// align-items: center;
				margin: 20rpx;
                  position: relative;
				  width: 100%;
				  height: 114rpx;
				.payment-icon {
					margin-top: 32rpx;
					width: 30rpx;
					height: 28rpx;
					margin-right: 18rpx;
				}

				.payment-text {
					margin-top: 20rpx;
					font-size: 36rpx;
					color:#000;
					flex: 1;
				}

				.check-icon {
					position: absolute;
					right: 50rpx;
					bottom:50rpx;
					// width: 30rpx;
					// height: 30rpx;
				}
			}

			.payment-footer {
			position: fixed;
			background: #FFFFFF;
			right: 0;
			bottom: 0;
				height: 160rpx;
				line-height: 120rpx;
				padding: 0 25rpx;
				box-sizing: border-box;
				width: 100%;
                   display: flex;
				   justify-content: space-between;
				.fee-info {
					// display: flex;
					// justify-content: space-between;
					// align-items: center;
					// margin-bottom: 30rpx;
					.fee-label {
						font-size: 28rpx;
						color: #000;
					}

					.fee-amount {
						font-size: 32rpx;
						color: #FF0000;
						font-weight: bold;
					}
				}


			}
		}
	}
	.pay-btn {
		margin-top: 212rpx;
		box-sizing: border-box;
		// position: absolute;
		// bottom: 22rpx;
		// left: 36rpx;
		// margin-top: 22rpx;
		margin-left: 36rpx;
		width: 676rpx;
		height: 80rpx;
		background-color: $primary-color;
		color: $white;
		font-size: 32rpx;
		text-align: center;
		line-height: 80rpx;
		border-radius: 45rpx;
		border: none;
	}
</style>